<template>
    <div class="agency-fn">
        <a-modal width="1300px" :visible="visible" title="机构功能设置" @cancel="closeModal" class="yuan-modal agency-fn-modal"
            :dialog-style="{ top: '20px' }">
            <a-spin tip="Loading..." :spinning="saveLoading">
                <a-form-model layout="inline" class="yuan-form" ref="form" :model="formData" :class="isShow?'disable-form':''"
                    :label-col="{ style: { width: '150px' } }" :wrapper-col="{ style: { width: 'calc(100% - 160px)' } }">

                    <div class="form-panel yuan-form-col3">
                        <div class="form-panel-box">
                            <a-form-model-item class="yuan-form-item" label="机构名称" prop="phone">
                                <span class="yuan-form-input">{{formData.name}}</span>
                            </a-form-model-item>
                            <a-form-model-item class="yuan-form-item" label="机构类型" prop="phone">
                                <span class="yuan-form-input">{{formData.institutionalType}}</span>
                            </a-form-model-item>
                            <a-form-model-item class="yuan-form-item" label="自营/加盟" prop="phone">
                                <span class="yuan-form-input">{{formData.storeType === "ZY" ? "自营" : "加盟"}}</span>
                            </a-form-model-item>
                            <a-form-model-item class="yuan-form-item" label="添加时间" prop="phone">
                                <span class="yuan-form-input">{{$format(formData.createTime)}}</span>
                            </a-form-model-item>
                            <!-- <div class="form-title">时间授权</div>
                            <div style="padding:20px;padding-left:110px">
                                <a-radio-group class="yuan-form-input" style="max-width:300px" v-model="formData.gender">
                                    <a-radio value="选择日期">选择日期：
                                        <a-range-picker @change="dateChange" :placeholder="['开始日期','结束日期']"
                                            :format="['YYYY-MM-DD','YYYY-MM-DD']" />
                                    </a-radio>
                                    <a-radio value="无时间限制">无时间限制</a-radio>
                                </a-radio-group>
                            </div> -->
                            <div class="form-title">功能授权</div>
                            <div style="padding:20px;padding-left:110px">
                                <a-checkbox-group class="yuan-form-input" style="max-width:300px"
                                    v-model="formData.functionAccredit">
                                    <a-checkbox value="营销中心应用">营销中心应用</a-checkbox>
                                    <a-checkbox value="商城管理应用">线上商城</a-checkbox>
                                </a-checkbox-group>
                            </div>
                        </div>

                    </div>
                </a-form-model>
            </a-spin>
            <template slot="footer">
                <template v-if="isShow">
                    <a-button @click="closeModal">
                        关闭
                    </a-button>
                </template>
                <template v-else>
                    <a-button @click="modalOk" type="primary" :loading="saveLoading">
                        确认保存
                    </a-button>
                    <a-button @click="closeModal">
                        取消
                    </a-button>
                </template>

            </template>
        </a-modal>
    </div>
</template>

<script lang="ts">
import { Component, Prop, Watch, Vue } from "vue-property-decorator";
import UploadVue from "@/components/upload.vue";
import platformApi from "@/api/platformApi";
@Component({
    name: "tpl",
    components: { UploadVue },
})
export default class extends Vue {
    @Prop({ default: false }) visible!: boolean;
    @Prop({ default: false }) isShow!: boolean;
    @Prop({ default: "" }) editInfo!: any;

    @Watch("visible")
    visibleChange() {
        if (this.visible) {
            if (this.editInfo.id) {
                this.formData = { ...this.editInfo };
            } else {
                this.formData = {};
            }
        } else {
        }
    }
    saveLoading = false;
    formData: any = {
        phone: "",
    };
    async mounted() {}

    closeModal() {
        this.$emit("closeModal");
    }

    async modalOk() {
        this.saveLoading = true;
        try {
            const res = await platformApi.addOrganization({
                id: this.formData.id,
                functionAccredit: this.formData.functionAccredit||[],
            });
            this.$message.success("保存成功");
            this.closeModal();
            this.$emit("resetList");
        } finally {
            this.saveLoading = false;
        }
    }

    dateChange(e: any[]) {
        const arr = e.map((item) => item.format("YYYY-MM-DD"));
        this.formData.beginTime = arr[0];
        this.formData.endTime = arr[1];
    }
}
</script>
<style lang="scss">
.agency-fn-modal {
}
</style>
